<template>
  <div class="mContainer">
    <div class="header-container">
        <span class="header-left-span">方案详情</span>
        <span class="header-right-span">{{type}}</span>
      </div>

    <div class="area plan-area-container">
      <div class="area-top-container">
        <img class="area-icon" src="../../assets/image/start-point-icon.png"/>
        <span class="area-span">{{start}}</span>
      </div>

      <div class="area-bottom-container area-top-container">
        <img class="area-icon" src="../../assets/image/end-point-icon.png"/>
        <span class="area-span" >{{end}}</span>
      </div>

    </div>

    <div class="plan-list">

      <div class="plan-list-item-top"></div>

      <!--siteType  1 乘坐  2 步行  3 途径  4 到达-->
      <!--type 1:起点 2:终点 3:步行 4:乘坐 5:途径 6:到达公交起点 7:到达公交终点 type 8:乘车站 9:换乘站 10:乘坐 11:换乘-->
      <div class="plan-list-item" v-for="(item,index) in planDetailData">
        <img v-if="item.type==4" class="plan-list-bus" src="../../assets/image/bus-icon.png"/>
        <img v-else-if="item.type==3" class="plan-list-people" src="../../assets/image/people-icon.png"/>
        <div v-else="" class="plan-list-none"></div>

        <div class="plan-list-img-container">
          <span class="plan-list-line"></span>
          <img v-if="item.type==1" class="plan-list-start-img" src="../../assets/image/line-detail-start.png">
          <img v-else-if="item.type==2" class="plan-list-end-img" src="../../assets/image/line-detail-end.png">
          <img v-else="" class="plan-list-middle-img" src="../../assets/image/line-detail-middle.png">
          <span class="plan-list-line" v-if="index!=planDetailData.length-1"></span>
          <span class="plan-list-line-none" v-else="index!=planDetailData.length-1"></span>
        </div>

        <div v-if="index==0" class="plan-list-name-container">
          <span class="plan-list-name">{{item.name}}：{{item.content}}</span>
          <img v-if="item.type==4||item.type==6||item.type==7" class="plan-list-right-arrow"
               src="../../assets/image/right-arrow-icon.png"/>
        </div>

        <div v-else-if="index==planDetailData.length-1" class="plan-list-name-container-noBorder">
          <span class="plan-list-name">{{item.name}}：{{item.content}}</span>
          <img v-if="item.type==4||item.type==6||item.type==7" class="plan-list-right-arrow"
               src="../../assets/image/right-arrow-icon.png"/>
        </div>

        <div v-else="" class="plan-list-name-container-middle" v-on:click="getSite(index, item.isExist)">
          <span class="plan-list-name">{{item.name}}：{{item.content}}</span>
          <img v-if="(item.type==4||item.type==6||item.type==7) && item.isExist == 1" class="plan-list-right-arrow"
               src="../../assets/image/right-arrow-icon.png"/>
        </div>

      </div>

      <div class="plan-list-item-bottom"></div>
    </div>

  </div>
</template>

<script>
  export default {
    data () {
      return {
        planDetailData: {},
        start: '',
        end: '',
        type: ''
      };
    },

    methods: {
      getSite: function (index, isExist) {
        if (isExist === undefined) { // 判断库中是否存在该线路、站点
          return;
        }
        var siteType = this.planDetailData[index].type;
        /*
        type 1:起点 2:终点 3:步行 4:乘坐 5:途径 6:到达公交起点 7:到达公交终点 type 8:乘车站 9:换乘站 10:乘坐 11:换乘
        */
        var routerPath;
        if (siteType === 6 || siteType === 7) {
          /*
          67站点详情
           */
          var param = {};
          param.name = this.planDetailData[index].content;
          this.$storage.setStorage('searchSiteDetailParam', param);

          routerPath = '/siteDetails';
          this.$router.push({ path: routerPath });
        } else if (siteType === 4) {
          /*
          4线路详情
           */
          var data = {};
          data.routeName = this.planDetailData[index].line;
          data.direction = this.planDetailData[index].direction;
          data.updown = 1; // 默认
          this.$storage.setStorage('lineDetails', data);

          routerPath = '/lineDetails';
          this.$router.push({ path: routerPath });
        }
      }
    },

    created () {
      if (this.$storage.getStorage('planDetail')) {
        var param = this.$storage.getStorage('planDetail');
        if (this.$storage.getStorage('positionCity')) {
          param.positionCity = this.$storage.getStorage('positionCity'); // GPS定位城市
        }
        var _this = this;
        this.$baseService.postData(this.$global.API_POST_PLAN_DETAIL, param, function (data) {
          _this.planDetailData = data;
        });
        this.start = param.start;
        this.end = param.end;
        this.type = param.typeName;
      }
      if (this.$storage.setStorage('intervalID')) {
        clearInterval(this.$storage.setStorage('intervalID'));
      }
    },

    destroyed () {

    }
  };
</script>

<style scoped>
  .mContainer{
    display: flex;
    flex-direction: column;
    margin: 0px;
    padding: 0px;
  }

  .plan-area-container{
    background-color: white;
    margin-bottom: 0.26rem;
    padding-left: 0.26rem;
  }

  .plan-area-top img{
    width: 0.16rem;
    height: 0.16rem;
    align-self: center;
  }

  .plan-area-top span{
    font-size: 0.39rem;
    color: #333333;
    margin-left: 0.26rem;
    display: inline-block;
    margin-top: 0.4rem;
    margin-bottom: 0.32rem;
  }

  .plan-list{
    background-color: white;
    display: flex;
    flex-direction: column;
  }

  .plan-list-item-top{
    width: 1px;
    height: 0.26rem;
    margin-left: 1.22rem;
    background-color: #f7f7f7;
  }

  .plan-list-item-bottom{
    height: 0.26rem;
  }

  .plan-list-item{
    display: flex;
    flex-direction: row;
    height: 1.33rem;
  }

  .plan-list-bus{
    width: 0.42rem;
    height: 0.42rem;
    margin-left: 0.4rem;
    align-self: center;
  }

  .plan-list-people{
    width: 0.34rem;
    height: 0.48rem;
    margin-left: 0.48rem;
    align-self: center;
  }

  .plan-list-none{
    width: 0.42rem;
    height: 0.42rem;
    margin-left: 0.4rem;
  }

  .plan-list-img-container{
    display: flex;
    flex-direction: column;
    margin-left: 0.26rem;
  }

  .plan-list-line{
    width: 1px;
    flex: 1;
    background-color: #f7f7f7;
    margin-left: 0.14rem;
  }

  .plan-list-line-none{
    width: 1px;
    flex: 1;
    background-color: white;
    margin-left: 0.14rem;
  }

  .plan-list-start-img{
    width: 0.37rem;
    height: 0.37rem;
  }

  .plan-list-middle-img{
    width: 0.32rem;
    height: 0.32rem;
  }

  .plan-list-end-img{
    width: 0.37rem;
    height: 0.37rem;
  }

  .plan-list-name-container{
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid #f7f7f7;
    flex: 1;
    margin-left: -0.18rem;
  }

  .plan-list-name-container-middle{
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid #f7f7f7;
    flex: 1;
    margin-left: -0.16rem;
  }

  .plan-list-name-container-noBorder{
    display: flex;
    flex-direction: row;
    flex: 1;
  }

  .plan-list-right-arrow{
    margin-right: 0.4rem;
    width: 0.21rem;
    height: 0.34rem;
    align-self: center;
  }

  .plan-list-name{
    font-size: 0.37rem;
    color: #333333;
    margin-left: 0.4rem;
    align-self: center;
    font-weight: 500;
    flex: 1;
  }

</style>
